<template>
	<section>
		<!--start  面包屑-->
		<div class="location">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item :to="{path:'/index'}">首页</el-breadcrumb-item>
				<el-breadcrumb-item>营销</el-breadcrumb-item>
				<el-breadcrumb-item>通知公告</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!--end  面包屑-->
		<!--start content-->
		<div class="content" ref="content">
			<!--start 普通搜索-->
			<div class="public_th clearfix" v-if="vue_row_selectCount==0">
				<div class="slideBtn fl" >
					<el-select style="width: 110px" v-model="portalDocListQb.docPlaceCode" @change="queryByPage" placeholder="全部通知分类">
						<el-option key="1" label='全部通知分类' value=''>
						</el-option>
						<el-option v-for="item in options"
							:key="item.docPlaceCode"
							:label="item.docPlaceName"
							:value="item.docPlaceCode">
						</el-option>
					</el-select>
				</div>
				<div class="public_th_left fl">
					<div class="fl">
						<div class="search_input">
							<input @keydown.enter="generalSearch_ok" type="text" v-model="portalDocListQb.fullTextFilterStr" placeholder="请输入标题" /><i @click="generalSearch_ok"></i>
						</div>
					</div>
				</div>
				<div class="public_th_right fr">
					<!--<a>导入</a>
					<a>导出</a>-->
					<router-link to="/portalDocListAdd" style="background: #13c19f;color: #fff;border: 0;">新增</router-link>
				</div>
			</div>
			<!--end 普通搜索-->
			<!--start 表格-->
			<div class="table contentBodyCon content_table_list" :class="{beforeNone:portalDocListSet.list.length!='0'}">
				<el-table
					ref="portalDocListRows"
					:data="portalDocListSet.list"
					style="width: 100%;  z-index: 10;"
					:max-height="vue_tableHeight"
					@sort-change="vFun_sort"
					@selection-change="row_select">
					<!--<el-table-column prop="docListCode" label="业务代码" sortable>
						start 可点击的项  可选！！
						<template scope="scope">
							<span class="canClickText" @click="row_goDetail(scope.row)" v-html="scope.row.docListCode"></span>
						</template>
						<!--end 可点击的项-->
					</el-table-column>-->
					<el-table-column prop="docListTitile" label="标题">
						<template scope="scope">
							<span class="canClickText" @click="row_goDetail(scope.row)" v-html="scope.row.docListTitile"></span>
						</template>
					</el-table-column>
					<el-table-column prop="docPlaceName" label="通知分类"></el-table-column>
					<el-table-column sortable="custom"  prop="createDateStr" label="发布时间"></el-table-column>
					<!-- add more column header -->

					<el-table-column prop="" label="" fixed="right" width="60" >
						<template scope="scope">
							<el-popover trigger="hover" placement="bottom">
								<p class="popover_p" style="cursor: pointer;" @click="row_goDetail(scope.row)">
									<em class="iconfont">&#xe617;</em>详情
								</p>
								<p class="popover_p" @click="batchDeleteForever(scope.row.docListCode)">
								 	<em class="iconfont">&#xec50;</em>删除
								 </p>
								<div slot="reference" style="text-align: center;">
									<em class="iconfont tab_hover">&#xe607;</em>
								</div>
							</el-popover>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<!--end 表格-->
			<div class="block fr">
				<el-pagination
					@size-change="page_onPageSizeChange"
					@current-change="page_onCurPageChange"
					:current-page="parseInt(portalDocListSet.pageTools.pageNo)"
					:page-sizes="portalDocListSet.pageTools.pageSizeOptions"
					:page-size="parseInt(portalDocListSet.pageTools.pageSize)"
					:total="parseInt(portalDocListSet.pageTools.recordCount)"
					layout="total, prev, pager, next, sizes,jumper">
				</el-pagination>
			</div>
		</div>
		<!--end content-->
	</section>
</template>

<script>
	/*
	 1.引入的组件、文件等，优先写在顶部。
	 2.组件的选项编写顺序按照先string再obj再function，详细如下：
	 	1):el=>name=>template
	 	2):components=>watch=>filters=>computed=>props=>directives=>propsData=>parent=>mixins=>delimiters=>functional=>methods
	 	3):render=>data=>extends=>生命周期钩子
	 * */
	import helpComponents from '../../../components/help/help'    //引入右侧帮助组件 可选！！
	export default {
		components:{helpComponents},
		data() {
			return {
				/* start 全局变量定义 */
				vue_advSearch_showDialog:false,  //是否启用高级搜索功能
				vue_advSearch_enable:false,  //是否显示高级搜索窗口
				vue_tableHeight:500,  //表格高度
				vue_row_selectCount:0,  //选择的row数
				vue_row_docListCodeStr:"",  //选中的row

					//table数据
				portalDocListSet: {
					"list":[],  //数据列表
					"page":{},	//分页数据
					"sumInfo":{}, //汇总信息
				},
					/*--查询条件--*/
				portalDocListQb:{
					"fullTextFilterStr":"",  	//查询关键词
					"docPlaceCode":'',			//通知分类唯一代码
					"releaseDate":'',			//发布时间
					"orderStr":'',
				},

				options:[], 				//通知分类下拉框

				/* end 全局变量定义 */
			}
		},
		methods: {
	    	vFun_sort(type){
	    		if(type.order==='ascending'){
	    			this.portalDocListQb.orderStr=type.prop
	    		}else if(type.order==='descending'){
	    			this.portalDocListQb.orderStr=type.prop +' desc'
	    		}else{
	    			this.portalDocListQb.orderStr=''
	    		};
	    		this.queryByPage();
	    	},
			/* start 页面交互方法 */
				//选择row
			row_select(val) {
				this.vue_row_selectCount=val.length;
		        this.vue_row_docListCodeStr = "";
		        val.forEach((item,index,arr)=>{
		        	this.vue_row_docListCodeStr += item.docListCode+","
		        });
				this.vue_row_docListCodeStr = this.vue_row_docListCodeStr.substring(0,this.vue_row_docListCodeStr.length-1);
				if (this.vue_row_selectCount!=0) {
					this.vue_advSearch_showDialog=false
				}
			},
				//查看详情
			row_goDetail(data){
				localStorage.setItem("docListCode",data.docListCode);
				this.$router.push({path:"/portalDocListDetail"});
			},
				//普通搜索 关键字
			generalSearch_ok(){
				this.portalDocListSet.pageTools.pageNo=1;
				this.queryByPage();
			},
				//查table数据
			queryByPage(){
				this.axios({
					method: 'post',
					url: "/v3/portal/docLists/list",
					data:{
						"offset":(this.portalDocListSet.pageTools.pageNo-1)*this.portalDocListSet.pageTools.pageSize,
						"limit":this.portalDocListSet.pageTools.pageSize,
						"fullTextFilterStr":this.portalDocListQb.fullTextFilterStr,
						"docPlaceCode":this.portalDocListQb.docPlaceCode,
						"startTime":this.portalDocListQb.releaseDate[0],
						"endTime":this.portalDocListQb.releaseDate[1],
						"orderStr":this.portalDocListQb.orderStr,
					}
				}).then((res) => {
					this.portalDocListSet.list = res.data.list;
					this.portalDocListSet.pageTools = res.data.pageTools;
					this.portalDocListSet.sumInfo = res.data.sumInfo;
					this.portalDocListSet.pageTools.pageSizeOptions = JSON.parse(this.portalDocListSet.pageTools.pageSizeOptions);
				}).catch((err)=>{
					this.Public.openError(this,err.response.data);
			  	});
			},
				//pageSize每页条数变化时的fn
			page_onPageSizeChange(val) {
				this.portalDocListSet.pageTools.pageSize = val;
				this.queryByPage();
			},
				//pageNo当前页码变化时的fn
			page_onCurPageChange(val) {
				this.portalDocListSet.pageTools.pageNo = val;
				this.queryByPage();
			},
				//批量永久删除
			batchDeleteForever(docListCodeStr){
				this.$confirm('请确认是否删除？', '确认', {
			        confirmButtonText: '确定',
			        cancelButtonText: '取消',
			        cancelButtonClass:"fr",
			        confirmButtonClass:"fr",
			        customClass:"clearfixBox"
			    }).then(()=>{
			    	this.axios({
						method: 'DELETE',
						url: "/v3/portal/docLists/" + docListCodeStr,
						data:{
						}
					}).then((res) => {
						this.vue_row_selectCount = 0;
				        this.vue_row_docListCodeStr = "";
						this.Public.openSuccess(this,"操作成功！");
						this.queryByPage();
					}).catch((err)=>{
						this.Public.openError(this,err.response.data);
				    });
			    }).catch(()=>{

			    });
			},
			/* add more row action function */
			/* end 页面交互方法 */
		},
		created(){
			this.portalDocListSet.pageTools = this.$store.state.page;
			//请求客户列表
			this.queryByPage();

		},
		mounted() {
			//动态设置高度
			this.$refs.content.style.height = (document.documentElement.clientHeight - 124)+"px";
			this.vue_tableHeight = document.documentElement.clientHeight - 240;
			//获取通知分类
			this.axios({
				method: 'post',
				url: "/v3/portal/docPlaces/listAll",
				data:{}
			}).then((res) => {
					this.options = res.data.list;
			}).catch((err)=>{
			    this.Public.openError(this,err.response.data)
		    });
		},
	}
</script>

<style scoped>
	/* start  面包屑 */
	.location {padding: 3px 0 15px 0;}
	/* end  面包屑 */
	/* start content */
	.content {position: relative;background: #fff;padding: 15px;overflow-y: auto;font-family: "微软雅黑";}
		/* start 高级搜索 */
	.modal_backdrop {position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 80;background-color: rgba(240, 240, 240, 0.2);}
	.specific_search {position: absolute;width: 100%;top: 0;left: 0;padding: 30px;z-index: 1005;background: #fff;box-sizing: border-box;box-shadow: 0 0 10px #ccc;}
	.search_title {font-size: 16px;border: 0;color: #415161;}
	.form {width: 450px;margin: 20px 0;background: #fff;text-align: right;}
	.form li {margin-top: 15px;}
	.form input {width: 350px;height: 32px;border: 0;}
	.form div {display: inline-block;position: relative;width: 358px;height: 34px;border-radius: 4px;text-indent: 5px;margin-left: 12px;}
	.form li:first-child div {border: 1px solid rgb(191, 212, 217);}
	.form li:first-child div input {border-radius: 4px;}
	.search_btn {margin-top: 70px;}
	.search_handle {margin-left: -6px;height: 36px;line-height: 36px;}
	.search_handle em {font-size: 14px;}
	.search_handle a {margin-right: 20px;cursor: pointer;color: #768696;}
	.search_handle a:hover {color: #03B8CC;}
	.search_handle {margin-left: 10px;}
		/* end 高级搜索 */
		/* start 批量操作 */
	.batch_handle {margin-left: -6px;height: 36px;line-height: 36px;}
	.batch_handle em {font-size: 14px;}
	.batch_handle a {margin-right: 20px;cursor: pointer;color: #768696;}
	.batch_handle a:hover {color: #03B8CC;}
		/* end 批量操作 */
		/* start 普通搜索 */
	.public_th {position: relative;min-width: 750px;z-index: 100;}
	.public_th_left span.search_openBtn {display: block;position: relative;height: 36px;margin-right: 10px;padding-right: 0px;line-height: 36px;color:#93a6b7;z-index: 100;cursor: pointer;}
	.slideBtn {line-height: 36px;margin-right: 26px;}
	.slideBtn>div>span{display: block;cursor: pointer;}
	.search_input input {display: block;float: left;width: 400px;height: 34px;font-size: 12px;border: 0;margin-left: 20px;}
	.search_input {float: left;width: 450px;border: 1px solid #cdd9e6;border-radius: 30px;margin-right: 10px;cursor: pointer;}
	.search_input:hover {border-color:#13C19F;transition: 1s;}
	.search_input i {background: url('../../../img/sousuo.png') no-repeat; height: 20px;width: 20px;display: inline-block;position: relative;top: 7px;right: 5px;cursor: pointer;}
	.public_th_right a {display: block;float: left;width: 80px;height: 32px;margin-left: 10px;box-sizing: border-box;text-decoration: none;text-align: center;line-height: 32px;border-radius: 30px;border: 1px solid #cdd9e6;cursor: pointer;}
		/* end 普通搜索 */
		/* start 表格 */
	.table {margin-top: 15px;}
	.table th {height: 50px;}
	.el-table th>.cell {width: 100%;word-wrap: normal;text-overflow: ellipsis;line-height: 20px;box-sizing: border-box;font-weight: normal !important;font-size: 14px;}
	.el-table {font-size: 12px !important;font-weight: normal !important;}
	.el-table--fit {border-left: 0;}
	.popover_p {text-indent: 10px;line-height: 30px;}
	.popover_p em {position: relative;top: 2px;margin-right: 3px;}
	.popover_p:hover {background: #eef1f9;color: #03B8CC;}
	.tab_hover {color: #b7c6d6;cursor: pointer;}
	.canClickText {cursor: pointer;color:#03B8CC;text-decoration:underline;}
		/* end 表格 */
		/* start page */
	.block {margin: 15px;}
		/* end page */
	/* end content */
	/* start transition */
	.fade-enter,.fade-leave-active {opacity: 0}
	.fade-enter-active,.fade-leave-active {transition: .4s;}
	/* end transition */
</style>
